<template>
  <div class="search-container">
    <!-- 
      注意：在 van-search 外层增加 form 标签，
      且 action 不为空，即可在 iOS 输入法中显示搜索按钮。
     -->
    <form action="/">
      <van-search
        v-model="keywords"
        shape="round"
        background="#5094f3"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="$router.go(-1)"
        @focus="suggestShow = true"
      />
    </form>
    <!-- 搜索历史 -->
    <SearchHistory v-if="keywords === ''"></SearchHistory>
    <!-- 搜索建议 -->
    <SearchSuggestion
      :keywords="keywords"
      v-else-if="suggestShow"
      @search="onSearch"
    ></SearchSuggestion>
    <!-- 搜索结果 -->
    <SearchResult v-else></SearchResult>
  </div>
</template>

<script>
/**
 * 搜索历史、搜索建议、搜索结果组件展示思路：
 * 1. 如果keywords是空，则展示搜索历史
 * 2. 若果input输入框聚焦，并且搜索关键词keywords不为空，则展示搜索建议
 * 3. 点击搜索词或者在input框聚焦状态下按下enter键触发input的search方法的时候展示搜索结果
 */
import SearchHistory from './components/search-history.vue'
import SearchSuggestion from './components/search-suggestion.vue'
import SearchResult from './components/search-result.vue'
export default {
  components: {
    SearchHistory,
    SearchSuggestion,
    SearchResult
  },
  data() {
    return {
      keywords: '',
      suggestShow: false
    }
  },
  methods: {
    // 触发搜索两种情况：
    // 1. 触发了input框的search事件会触发搜索
    // 2. 用户点击搜索关键词会触发搜索
    onSearch(keywords) {
      console.log(keywords, '========');
      this.keywords = keywords
      this.suggestShow = false
      console.log('触发了搜索')
    }
  }
}
</script>

<style lang="less">
.search-container {
  .van-search__action {
    color: #fff;
    // 方式一：
    &:active {
      background: #5094f3;
    }
  }
  // 方式二：
  // .van-search__action:active {
  //   background: #5094f3;
  // }
}
</style>